<template>
  <div class="detail">
    <TypeNav />
    <div class="crumbs-nav-wrap">
      <div class="crumbs-nav">
        <div>{{ categoryView.category1Name }}</div>
        <span>&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;</span>
        <div>{{ categoryView.category2Name }}</div>
        <span>&nbsp;&nbsp;&nbsp;>&nbsp;&nbsp;&nbsp;</span>
        <div>{{ categoryView.category3Name }}</div>
      </div>
    </div>
    <div class="detail-content-wrap">
      <div class="detail-imgs">
        <Zoom :imgUrl="skuInfo.skuDefaultImg" />
        <ImageList :skuImageList="skuInfo.skuImageList" />
      </div>
      <div class="detail-content">
        <h3>
          {{ skuInfo.skuName }}
        </h3>
        <p>
          机身重量（g） 173g 机身宽度（mm） 73.67mm 机身厚度（mm） 7.29mm
          机身长度（mm） 158.2mm 机身材质 玻璃
        </p>
        <div class="price">
          价 格 <i>¥</i><span>{{ skuInfo.price }}</span>
        </div>
        <!-- 销售属性 -->
        <div
          class="check"
          v-for="(attr, index) in spuSaleAttrList"
          :key="index"
        >
          {{ attr.saleAttrName }}：
          <label
            :class="{ activi: spuSaleAttrValue.isChecked == 1 }"
            v-for="(spuSaleAttrValue, index) in attr.spuSaleAttrValueList"
            :key="spuSaleAttrValue.id"
            @click="checkSaleAttr(index, attr.spuSaleAttrValueList)"
            >{{ spuSaleAttrValue.saleAttrValueName }}</label
          >
        </div>

        <div class="count">
          <inputModule :min="1" :max="100" v-model="carCount" />
          <button class="addToCar" @click="addToCar">加入购物车</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getGoodsDetail } from '@/api/detail'
import { reqPostAddToCart } from '@/api/cartAPI'

import ImageList from './ImageList/ImageList'
import Zoom from './Zoom/Zoom'
import TypeNav from '@/components/TypeNav'
import inputModule from '@/components/InputModule'

export default {
  name: 'ZDetail',
  components: {
    TypeNav,
    ImageList,
    Zoom,
    inputModule,
  },
  data() {
    return {
      carCount: 1,
      skuInfo: {},
      categoryView: {},
      spuSaleAttrList: [],
      color: '',
      sale: '',
    }
  },
  methods: {
    // 选择属性的方法
    checkSaleAttr(index, spuSaleAttrValueList) {
      spuSaleAttrValueList.forEach((info) => {
        info.isChecked = 0
      })
      spuSaleAttrValueList[index].isChecked = '1'
    },

    // 添加到购物车
    async addToCar() {
      await reqPostAddToCart(this.skuInfo.id, this.carCount)

      const goodsInfo = {
        skuName: this.skuInfo.skuName,
        skuNum: this.carCount,
        skuImg: this.skuInfo.skuDefaultImg,
        skuSaleAttr: this.spuSaleAttrList.map((spuSaleAttr) => {
          return `${spuSaleAttr.saleAttrName}：${
            spuSaleAttr.spuSaleAttrValueList.find(
              (item) => item.isChecked === '1'
            ).saleAttrValueName
          }`
        }),
      }
      localStorage.setItem('goodsInfo', JSON.stringify(goodsInfo))
      this.$router.push({
        path: '/addcart_success',
      })
    },
  },
  // 组件挂载请求数据
  async mounted() {
    const { id } = this.$route.params
    const res = await getGoodsDetail(id)
    console.log(res)
    this.skuInfo = res.skuInfo
    this.categoryView = res.categoryView
    this.spuSaleAttrList = res.spuSaleAttrList
  },
}
</script>

<style lang="less">
.crumbs-nav-wrap {
  min-width: 1200px;
  height: 60px;
  padding-top: 25px;
  box-sizing: border-box;
}
.crumbs-nav {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.detail-content-wrap {
  width: 1200px;
  margin: 0 auto;
  display: flex;
}
.detail-content {
  padding: 80px 0 0 100px;
  p {
    color: #e12228;
    margin-top: 20px;
    margin-bottom: 15px;
  }
}
.price {
  height: 50px;
  // line-height: 50px;
  box-sizing: border-box;
  background-color: #fee9eb;
  padding-left: 5px;
  padding-top: 10px;
  margin-bottom: 20px;
  i {
    color: #c81623;
    font-size: 16px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  span {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: #c81623;
    vertical-align: middle;
  }
}
.check {
  line-height: 28px;
  margin: 0 0 15px 0;
  color: #333;
  input:checked {
    display: none;
  }
  label {
    cursor: pointer;
    display: inline-block;
    padding: 2px 14px;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    margin-right: 10px;
    color: #666;
  }
  .activi {
    border-color: green;
    color: green;
  }
}
.count {
  position: relative;
  input {
    width: 40px;
    height: 40px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    outline: none;
    line-height: 40px;
    text-align: center;
  }
  button {
    box-sizing: border-box;
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #ddd;
    margin-left: -1px;
  }
  .addToCar {
    position: absolute;
    width: 130px;
    height: 40px;
    cursor: pointer;
    background-color: #df3033;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    left: 70px;
    top: 0;
  }
}
.add {
  top: 0;
}
.count button.sub {
  top: 19px;
  height: 21px;
}
</style>
